<!--  -->
<template>
  <div>
    <div>
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in tabs" :name="item.name" 
          :key="item.name" :label="item.label">
          
            <div class="box">
              
              <div v-if="activeName=='first'">
                <div class="datePicker">
                    <el-date-picker
                      v-model="dateTime"
                      format="yyyy - MM - dd "
                      value-format="yyyy-MM-dd"
                      @change="changeDate"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
              </div>
                <div>
                  <h2>用户分析</h2>
                  <el-row type="flex">
                    <div v-for="item in userInfo" :key="item.index">
                      <div class="cart">
                        <p class="title">{{ item.title }}</p>
                        <p class="bold">{{ item.num }}</p>
                      </div>
                    </div>
                  </el-row>
                  <div ref="userchart" style="height: 300px" id="userchart"></div>
                </div>
              </div>
              <div v-if="activeName=='second'">
                <goodsAnalysis/>
              </div>
              <div v-if="activeName=='third'">
                <payAnalysis/>
              </div>
              <div v-if="activeName=='fourth'">
                <flowAnalysis/>
              </div>
            </div>
          </el-tab-pane>
          
        </el-tabs>
      </template>
      
    </div>
  </div>
</template>

<script>
// import * as echarts from "echarts";
import goodsAnalysis from './goodsAnalysis'
import payAnalysis from './payAnalysis'
import flowAnalysis from './flowAnalysis'
export default {
  name:'analysisData',
  components:{
    goodsAnalysis,
    payAnalysis,
    flowAnalysis
  },
  data() {
    return {
      activeName: "first",
      tabs:[
        {
          name:'first',
          label:'用户分析'
        },
        {
          name:'second',
          label:'商品分析'
        },
        {
          name:'third',
          label:'交易分析'
        },
        {
          name:'fourth',
          label:'流量分析'
        }
      ],  
      dateTime: [],
      dateRange: [],
      chartsData: [15,23,10,30,11,6,0,0,0,2,4,15,4,22, 0,0,0,1,4,3,6,10,3,0,0,0,],
      userInfo: [
        {
          title: "累计会员总数",
          num: 120,
        },
        {
          title: "新增会员数",
          num: 0,
        },
      ],
      myChart:null,
    };
  },
  watch: {
    dateRange(val) {
      this.getEcharts();
    },
  },
  mounted() {
    
    this.defaultTime();
    this.$nextTick(() => {
      this.getEcharts();
    });
   
    // setTimeout(() => {
    //   this.getEcharts()
    // }, 1);
  },
 
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      this.activeName = tab.name
        this.$nextTick(() => {
          if(this.activeName=='first'){
            this.getEcharts();
          }
        });
    },
    getEcharts() {  
      let echarts = require("echarts");
      if(this.myChart){
        this.myChart.dispose()
      }
      this.myChart = echarts.init(document.getElementById("userchart"))
      
      // let myChart = echarts.init(this.$refs.userchart);
      
      let options = {
        tooltip: {
          trigger: "axis", //显示数据
        },
        legend: {
          data: ["新增会员数"],
          top: 0,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: this.dateRange,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "新增会员数",
            data: this.chartsData,
            type: "line",
          },
        ],
      };
      this.myChart.setOption(options);
    },
    //默认时间
    defaultTime() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      let day =
        date.getDate() < 10
          ? "0" + date.getDate().toString()
          : date.getDate().toString();
      //k开始时间
      let startTime = year + "-" + month + "-" + "01";
      //结束时间
      let endTime = year + "-" + month + "-" + day;
      this.dateTime = [startTime, endTime];
      this.dateRange = this.getDateInfo(startTime, endTime);
    },
    getDateInfo(start, end) {
      var result = [];
      var beginDay = start.split("-");
      var endDay = end.split("-");
      var diffDay = new Date();
      var dateList = new Array();
      var i = 0;
      diffDay.setDate(beginDay[2]);
      diffDay.setMonth(beginDay[1] - 1);
      diffDay.setFullYear(beginDay[0]);
      result.push(start);
      while (i == 0) {
        var countDay = diffDay.getTime() + 24 * 60 * 60 * 1000;
        diffDay.setTime(countDay);
        dateList[2] = diffDay.getDate();
        dateList[1] = diffDay.getMonth() + 1;
        dateList[0] = diffDay.getFullYear();
        if (String(dateList[1]).length == 1) {
          dateList[1] = "0" + dateList[1];
        }
        if (String(dateList[2]).length == 1) {
          dateList[2] = "0" + dateList[2];
        }
        result.push(dateList[0] + "-" + dateList[1] + "-" + dateList[2]);
        if (
          dateList[0] == endDay[0] &&
          dateList[1] == endDay[1] &&
          dateList[2] == endDay[2]
        ) {
          i = 1;
        }
      }
      // console.log(result);
      return result;
    },
    changeDate(val) {
      console.log(val);
      this.dateRange = this.getDateInfo(val[0], val[1]);
    },
    

  },
};
</script>

<style  scoped>
.datePicker {
  text-align: left;
  margin: 30px 20px;
}
.box {
  border: 1px solid #e6e6e6;
  width: 100%;
  height: 100%;
}
h2 {
  font-size: 16px;
  text-align: left;
  padding-left: 20px;
  margin: 30px 0;
}
.title {
  text-align: left;
  line-height: 50px;
}
.bold {
  font-size: 24px;
  font-weight: 700;
  color: #4d4d4d;
  padding-right: 10px;
  text-align: left;
}
.cart {
  width: 200px;
  height: 100px;
  border: 1px solid #e6e6e6;
  margin-left: 20px;
  padding-left: 30px;
}
</style>
